<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/css/index/index.css?v=2.0.2">
<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/css/index/indexNew.css?v=1.1.9.6">
<link rel="stylesheet" href="https://file.viplgw.cn/ui/public/css/swiper.min.css">
<script src="https://file.viplgw.cn/ui/public/js/swiper.min.js"></script>
<?php $userId = Yii::$app->session->get('userId'); ?>


<section id="app" class="appCenter">
    <div class="whiteBg"><img alt="" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/67.png"></div>
    <div class="whiteBg"><img alt="" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index/bgJx.png"></div>

    <!--  通栏轮播图  -->
    <!--轮播-->
    <div class="lunBox" style="height: 420px;">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <?php foreach ($banner as $k => $v) { ?>
                    <a onclick="_czc.push(['_trackEvent','首页-banner','查看详情','banner<?php echo($k + 1); ?>',''])"
                       href="<?php echo $v['url'] ?>" class="swiper-slide"
                       style="background: url('https://www.thinkuprep.com/<?php echo $v['pic'] ?>') no-repeat center;background-size: auto 100%;display: block;height: 420px">
                        <!--                        <img alt="" src="http://www.thinkuprep.com/-->
                        <?php //echo $v['pic'] ?><!--">-->
                    </a>
                <?php } ?>

            </div>
            <div class="dotBan">
                <ul class="dot">
                    <li></li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 做题模考 -->
    <div class="exerciseSim w12">
        <p class="skillTitle">做题模考</p>
        <div class="seconTitle"><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/indexNew/icon1@2x.png"
                                     alt="">逐科专项练习
        </div>
        <div class="cardBox">
            <div class="left">
                <div class="fourCard">
                    <div class="lineTop">
                        <div class="innerLeft">
                            <img alt=""
                                 src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/Listen@2x.png">
                            <span>听力</span>
                        </div>
                        <!--                        https://ielts.thinkwithu.com/cn/exercise/listen?category=all-->
                        <a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','听力',''])"
                           href="/cn/exercise/listen?category=all">去刷题<img alt=""
                                                                           src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/icon@2x.png"></a>
                    </div>
                    <ul class="lineBottom">
                        <li><a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','听力',''])"
                               href="/cn/exercise/listen?category=type">按题型练</a></li>
                        <li><a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','听力',''])"
                               href="/cn/exercise/listen?category=topic">按话题练</a></li>
                        <li><a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','听力',''])"
                               href="/cn/exercise/listen?category=level">按难度练</a></li>

                    </ul>
                </div>
                <div class="fourCard">
                    <div class="lineTop">
                        <div class="innerLeft">
                            <img alt=""
                                 src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/Reading@2x.png">
                            <span>阅读</span>
                        </div>
                        <!--                        https://ielts.thinkwithu.com/cn/exercise/read?category=all-->
                        <a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','阅读','')]"
                           href="/cn/exercise/read?category=all">去刷题<img alt=""
                                                                         src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/icon@2x.png"></a>
                    </div>
                    <ul class="lineBottom">
                        <li><a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','阅读',''])"
                               href="/cn/exercise/read?category=type">按题型练</a></li>
                        <li><a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','阅读',''])"
                               href="/cn/exercise/read?category=topic">按话题练</a></li>
                        <li><a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','阅读',''])"
                               href="/cn/exercise/read?category=level">按难度练</a></li>
                    </ul>
                </div>
                <div class="fourCard">
                    <div class="lineTop">
                        <div class="innerLeft">
                            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/writing@2x.png"
                                 alt="">
                            <span>写作</span>
                        </div>
                        <!--                        href="https://ielts.thinkwithu.com/cn/exercise/write?category=all"-->
                        <a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','写作',''])"
                           href="/cn/exercise/write?category=all">去刷题<img alt=""
                                                                          src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/icon@2x.png"></a>
                    </div>
                    <ul class="lineBottom">
                        <li><a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','写作',''])"
                               href="/cn/exercise/write?category=type">按题型练</a></li>
                    </ul>
                </div>
                <div class="fourCard">
                    <div class="lineTop">
                        <div class="innerLeft">
                            <img alt=""
                                 src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/speaking @2x.png">
                            <span>口语</span>
                        </div>
                        <!--                        href="https://ielts.thinkwithu.com/cn/exercise/speak?category=all"-->
                        <a onclick="_czc.push(['_trackEvent','首页-做题模考','去刷题','口语',''])"
                           href="/cn/exercise/speak?category=all">去刷题<img alt=""
                                                                          src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/icon@2x.png"></a>
                    </div>
                    <ul class="lineBottom">


                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="imgBox"><img alt=""
                                         src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/1.png">
                </div>
                <span>扫一扫</span>
                <span>下载APP做题/搜题</span>
                <div class="iconBox">
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/icon3@2x.png" alt="">
                </div>
            </div>
        </div>
        <div class="seconTitle shoot"><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/indexNew/icon2@2x.png"
                                           alt="">模考冲刺高分
        </div>
        <div class="wholeCard">
            <div style="display: flex; justify-content:space-between;margin-bottom: -20px">
                <div class="beeBox"><img alt=""
                                         src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/centerimgs1.png">
                </div>
                <div class="textBox">
                    <p>全真模考</p>
                    <p>全仿真还原考试环境，模考练习如临其境</p>
                </div>
            </div>
            <!--            <a href="https://ielts.thinkwithu.com/xiti.html" class="atonce">立即模考</a>-->
            <a onclick="_czc.push(['_trackEvent','首页-全真模考','立即模考','',''])" href="/cn/mock/list" class="atonce">立即模考</a>
        </div>
        <div class="seconTitle shoot"><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index/ceping_ico.png"
                                           alt="">测评基础情况
        </div>
        <div class="wholeCard">
            <div style="display: flex; justify-content:space-between;margin-bottom: -20px">
                <div class="beeBox"><img alt=""
                                         src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index/ceping.png">
                </div>
                <div class="textBox">
                    <p>智能测评</p>
                    <p>自动显示测评分数报告及详细复习计划</p>
                </div>
            </div>
            <!--            <a href="https://ielts.thinkwithu.com/xiti.html" class="atonce">立即模考</a>-->
            <a  href="/cn/evaluation/get-paper" class="atonce">立即测评</a>
        </div>
    </div>
    <!-- 雅思课程 -->
    <div class="exerciseCourse w12">
        <p class="skillTitle">雅思课程</p>
        <div class="cardBox">
            <div class="threeBox">
                <?php foreach ($class[2] as $k => $v) { ?>
                    <a onclick="_czc.push(['_trackEvent','首页-雅思课程','查看详情','<?php echo $v['name'] ?>',''])" class="card"
                       href="/course-detail/<?php echo $v['id'] ?>.html">
                        <div class="card_center">
                            <div class="cardImg"><img src="<?php echo $v['pic'] ?>" alt=""></div>
                            <div class="card_center2">
                                <div style="font-size: 16px;font-weight: bold;color: #424242;">
                                    <p><?php echo $v['name'] ?></p>
                                </div>
                                <div style="margin: 14px 0">
                                    <p class="cardsedem">总课时：<?php echo $v['duration'] ?></p>
                                    <p class="cardsedem">有效期：6个月</p>
                                </div>
                                <p class="money">¥ <?php echo $v['price'] ?></p>

                            </div>
                        </div>
                        <div class="purplesss">查看详情</div>
                    </a>

                <?php } ?>

            </div>
            <a onclick="_czc.push(['_trackEvent','首页-雅思课程','更多课程','',''])" href="https://www.thinkuprep.com/mall.html"
               class="buttomBox" style="width: 183px;margin: 0 auto;">
                <p>更多课程</p>
            </a>
        </div>
    </div>
    <!-- 热门活动 -->
    <div class="exerciseHot w12">

        <div class="cardBox">
            <p class="skillTitle">热门活动</p>
            <div class="fourBox">
                <?php foreach ($class[1] as $k => $v) { ?>
                    <a onclick="_czc.push(['_trackEvent','首页-热门活动','查看详情','<?php echo $v['name'] ?>',''])"
                       href="/active-detail/<?php echo $v['id'] ?>.html" class="card">
                        <div class="imgBox"><img alt="" src="<?php echo $v['pic'] ?>"></div>
                        <div class="textBox">
                            <div style="display: flex;align-items:center">
                                <div class="icon">HOT</div>
                                <p><?php echo $v['name'] ?></p>
                            </div>
                            <p>时间：<?php echo date('Y-m-d', strtotime($v['startTime'])) ?>
                                -<?php echo date('Y-m-d', strtotime($v['endTime'])) ?></p>
                            <div>
                                <p><?php echo $v['viewCount'] ?>人参与</p>
                                <p>查看详情</p>
                            </div>
                        </div>
                    </a>
                <?php } ?>
            </div>
            <a onclick="_czc.push(['_trackEvent','首页-热门活动','更多活动','',''])" href="https://www.thinkuprep.com/active.html"
               class="buttomBox" style="width: 183px;margin: 0 auto;">
                <p>更多活动</p>
            </a>
        </div>
    </div>

    <!-- 资深讲师团队 -->
    <div class="exerciseTeacher w12">
        <p class="skillTitle">师资团队</p>
        <!-- 资深讲师团队轮播图 -->
        <div class="teacherSlide" style="height: 660px">
            <div class="swiper-container gallery-top" style="position: relative;">
                <div class="swiper-wrapper">
                    <!-- 循环 swiper-slid -->
                    <?php foreach ($teacher as $k => $v) { ?>
                        <a onclick="_czc.push(['_trackEvent','首页-师资团队','查看老师','<?php echo $v['name'] ?>',''])"
                           href="/teacher-detail/<?php echo $v['id'] ?>.html" class="swiper-slide">
                            <div class="bgBox">
                                <div class="teacherImg">
                                    <img src="http://www.thinkuprep.com/<?php echo $v['pic'] ?>" alt="">
                                </div>
                                <div class="crown">
                                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/iconwang@2x.png"
                                         alt="">
                                </div>
                            </div>
                            <div class="nameCard">
                                <p><?php echo $v['name'] ?></p>
                                <?php $content = explode('<br />', nl2br($v['smallIntro'])); ?>
                                <p><?php echo $content[0] ?></p>
                            </div>
                            <div class="text">
                                <?php foreach ($content as $key => $val) {
                                    if ($key > 1 && $key < 5) { ?>
                                        <?php echo $val ?>
                                    <?php }
                                } ?>
                            </div>
                        </a>
                    <?php } ?>
                </div>
            </div>
            <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                    <?php foreach ($teacher as $k => $v) { ?>
                        <div onclick="changeOn(this)" class="swiper-slide <?php if ($k == 0): ?>on<?php endif; ?>"
                             style="background: #F1EFF8 url(http://www.thinkuprep.com<?php echo $v['pic'] ?>) no-repeat;background-size: contain"></div>
                    <?php } ?>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-white swiper-button-next1" onclick="showIndex()"
                ></div>
                <div class="swiper-button-prev swiper-button-white swiper-button-prev1" onclick="showIndex1()"
                ></div>
            </div>
        </div>


    </div>


    <!-- 高分案例 -->
    <!-- <div class="exerciseGao w12">
        <p class="skillTitle">高分案例</p> -->
    <!-- 高分案例轮播图 -->
    <!-- <div class="gaoSlide">
        <div class="swiper-container" style="position: relative;">
                <div class="swiper-wrapper"> -->
    <!-- 循环 swiper-slid -->
    <!-- <?php foreach ($case as $k => $v) { ?>
                    <?php $afterScore = explode(',', $v['afterScore']); ?>
                    <a href="/case-detail/<?php echo $v['id'] ?>.html" class="swiper-slide">
                        <b><?php echo isset($afterScore[4]) ? $afterScore[4] : 0 ?>分</b>
                        <p>雅思高分榜</p>
                        <div class="imgGao"><img src="<?php echo $v['pic'] ?>" alt=""></div>
                        <p><?php echo $v['studentName'] ?> 出分<?php echo isset($afterScore[4]) ? $afterScore[4] : 0 ?>分</p>
                        <div class="text">
                           <div>时间：<?php echo $v['outTime'] ?></div>
                           <div>班型：<?php echo $v['class'] ?></div>
                        </div>
                    </a>
                    <?php } ?>
                </div>
                <span class="num">02</span> -->
    <!-- Add Pagination -->
    <!-- <div class="swiper-pagination">
                </div>
            </div>
        </div>
    </div> -->
    <!--研发成果-->
    <div style="width: 100%; background: white">
        <div class="whyIelts w12">
            <p class="skillTitle">研发成果</p>
            <div class="exam-library" style="position: relative">
                <div class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events"
                     style="position: relative;width: 1100px;overflow:hidden;height: 220px">
                    <div class="swiper-wrapper" style="">


                        <?php foreach ($book as $v) { ?>
                            <div class="bookItem swiper-slide" style="width: 220px">
                                <img src="https://www.thinkuprep.com/<?php echo $v['pic'] ?>" alt="" width="100%">

                                <figure class="book" style="display: none">
                                    <ul class="hardcover_front">
                                        <li>
                                            <img src="<?php echo $v['pic'] ?>" alt="" width="100%" height="100%">
                                        </li>
                                        <li style="background:<?php echo $v['colour'] ?>;transform: scale(.96);"></li>
                                    </ul>
                                    <ul class="book-page">
                                        <li></li>
                                        <li>
                                            <p class="test-caption"
                                               style="letter-spacing: 5px;"><?php echo $v['name'] ?></p>
                                        </li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                    <ul class="hardcover_back">
                                        <li style="background: <?php echo $v['colour'] ?>;transform: scale(.96);"></li>
                                        <li></li>
                                    </ul>
                                    <ul class="book_spine">
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </figure>
                            </div>

                        <?php } ?>


                    </div>

                </div>
                <div class="swiper-button-prev swiper-button-prev2" style="left: -20px"></div>
                <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
                <div class="swiper-button-next swiper-button-next2" style="right: -20px"></div>
                <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
            </div>
        </div>
    </div>

    <!--通用信息提交弹窗-->
    <div class="commonPopup" v-if="showPopup" v-cloak>
        <div class="popupCenter">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index/propClose.png" alt="" class="closePopup"
                 @click="showPopup = false">
            <div class="popupRight">
                <div class="propRightCover">
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index/iconPhone.png" alt="">
                    <input type="text" class="phoneNum" v-model="phone" placeholder="请输入手机号">
                </div>
                <div class="propRightCover">
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index/iconCode.png" alt=""
                         style="width: 18px">
                    <input type="text" class="phoneCode" v-model="code" placeholder="验证码">
                    <a href="javascript:void(0)" :class="isSend?'codeSend':'codeBtn'" @click="getCode">{{text}}</a>
                </div>
            </div>
            <a href="javascript:void(0)" class="subPupop" @click="subPupopInfo">好的</a>
        </div>
    </div>
    <!--通用信息提交成功-->
    <div class="popupSuccess" v-if="success" v-cloak>
        <div class="successCenter">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index/propClose.png" alt="" class="closeSuccess"
                 @click="success = false">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index/propSuccess.png" alt=""
                 style="width: 70px;margin-bottom: 40px;">
            <p>稍后老师将电话联系您</p>
            <p>为您安排课程，请保持手机畅通哦</p>
            <a href="javascript:void(0)" @click="success = false" class="successBtn">好的</a>
        </div>
    </div>

</section>
<?php if ($userId == false) { ?>
    <div class="collectDataModal collectDataModalStart">
       <div class="DataModaCenter">
           <a href="javascript:void(0)" class="closePng" onclick="closeCollectData()">
               <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/indexNew/pop/close.png" alt="">
           </a>
           <a class="getNowBtn" href="/register.html?source=10&url=http://<?php echo $_SERVER['SERVER_NAME'] . Yii::$app->request->getUrl() ?>">注册立即领取</a>
       </div>
    </div>
<?php } ?>
<div class="collectDataModal collectDataModalEnd">
    <div class="DataModaCenterEnd">
        <a href="javascript:void(0)" class="closePng" onclick="closeCollectDataed()">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/indexNew/pop/close.png" alt="">
        </a>
    </div>
</div>
<script src="https://file.viplgw.cn/ui/thinku-ielts-new/js/index.js?v=1.2"></script>

<script>
    $(function (){
        if(localStorage.getItem('prop')){
            localStorage.removeItem('prop');
            $('.collectDataModalEnd').show();
        }
    })
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 5,
        spaceBetween: 0,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next2',
            prevEl: '.swiper-button-prev2',
        },
    });

    function closeCollectData() {
        $('.collectDataModalStart').css({"display": "none"});
        _czc.push(['_trackEvent', '首页-弹窗', '关闭弹窗', '', ''])
    }
    function closeCollectDataed() {
        $('.collectDataModalEnd').css({"display": "none"});
        _czc.push(['_trackEvent', '首页-弹窗', '关闭弹窗', '', ''])
    }


    $(function () {
        _czc.push(['_trackEvent', '全局', '首页', '', '']);
        $('.excellentLeftChange .sortName').hover(function () {
            $('.excellentLeftChange .sortName').removeClass('on');
            $(this).addClass('on');
            $('.excellentLeftChange .courseItemCover').removeClass('on');
            $('.excellentLeftChange .courseItemCover').eq($(this).index() - 1).addClass('on');
        });
        $('.leadNewsList').hover(function () {
            $('.leadNewsList').removeClass('on');
            $(this).addClass('on')
        });
        $('.leadNewsLists').hover(function () {
            $('.leadNewsLists').removeClass('on');
            $(this).addClass('on')
        });
        $('.smart-app').hover(function () {
            $('.teacherDetail').removeClass('on');
            $('.teacherDetail').eq($(this).index()).addClass('on')
        })
    });
    var swiperComomn = new Swiper('.lunBox .swiper-container', {
        autoplay: true,
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.lunBox .dot',
            clickable: true,
        }
    });
    // var swiperTeacher = new Swiper('.exerciseTeacher .swiper-container', {
    //     slidesPerView: 3,
    //     spaceBetween: 104,
    //     slidesPerGroup: 3,
    //     loop: true,
    //     // loopFillGroupWithBlank: true,
    //     pagination: {
    //         el: '.exerciseTeacher .swiper-pagination',
    //         clickable: true,
    //     }
    // });
    var swiperCase = new Swiper('.exerciseGao .swiper-container', {
        slidesPerView: 3,
        spaceBetween: 104,
        slidesPerGroup: 3,
        loop: true,
        // loopFillGroupWithBlank: true,
        pagination: {
            el: '.exerciseGao .swiper-pagination',
            clickable: true,
        }
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        slidesPerView: 3,
        navigation: {
            nextEl: '.swiper-button-next1',
            prevEl: '.swiper-button-prev1',
        },
        thumbs: {
            swiper: galleryThumbs
        }
    });

    function showIndex() {
        $('.teacherSlide .swiper-slide').removeClass('on');
        setTimeout(function () {
            $('.swiper-slide-thumb-active').eq(0).addClass('on');
        }, 100)

    }

    function showIndex1() {
        $('.teacherSlide .swiper-slide').removeClass('on');
        setTimeout(function () {
            $('.swiper-slide-thumb-active').eq(0).addClass('on');
        }, 100)
    }

    function changeOn(obj) {
        $('.swiper-slide-thumb-active').removeClass('on')
        $(obj).addClass('on');
    }
</script>
